<template>
   <div style="padding: 10px;">
    <el-container direction="vertical">
      <el-card shadow="always">
        压力测试场景管理
      </el-card>
      <el-card shadow="always" style="margin-top: 10px">
        <el-form :inline="true">
          <el-form-item label="场景分类：">
            <el-select>
              <el-option></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建人：">
            <el-select>
              <el-option></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="压测场景名称：">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="创建时间：">
            <el-date-picker
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary">搜索</el-button>
            <el-button icon="el-icon-refresh">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <div style="padding: 10px 0">
        <el-button type="primary" @click="handleScene('add')">新增场景</el-button>
      </div>
        <el-main class="no-padding">
          <el-table border :data="tableList" max-height="350" :row-style="customStyle">
            <el-table-column label="序号" align="center" width="50" show-overflow-tooltip>
              <template slot-scope="scope">
                  {{scope.$index + 1}}
              </template>
            </el-table-column>
            <el-table-column label="场景名称" align="center" prop="name" show-overflow-tooltip></el-table-column>
            <el-table-column label="场景分类" align="center" prop="classify" show-overflow-tooltip></el-table-column>
            <el-table-column label="场景描述" align="center" prop="description" show-overflow-tooltip></el-table-column>
            <el-table-column label="节点数/默认节点/自定义节点"  align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.nodeObj.totleNode}}</span>
                <span>/</span>
                <span>{{ scope.row.nodeObj.defaultNode}}</span>
                <span>/</span>
                <span>{{ scope.row.nodeObj.customNode}}</span>
              </template>
            </el-table-column>
            <el-table-column label="创建人" align="center" prop="founder" show-overflow-tooltip></el-table-column>
            <el-table-column label="创建时间" align="center" prop="createTime" show-overflow-tooltip></el-table-column>
            <el-table-column label="查看" min-width="180" align="center">
              <el-button type="text" @click="handleScene('see')">流程节点图</el-button>
              <el-button type="text" @click="handleScene('edit')">编辑</el-button>
              <el-button type="text" @click="handleScene('detail')">详情</el-button>
              <span class="el-button el-button--medium del" @click="handleScene('delete')">删除</span>
            </el-table-column>
          </el-table> 
          <div style="height: 50px;display: flex;align-items: center;justify-content: center;">
            <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
          </div>
        </el-main>
    </el-container>
   </div>
</template>

<script>
export default {
  data() {
    return {
      tableList:new Array(100).fill( {
          name:'国投洋浦港流量压测',
          classify:'流量加压',
          description:'这里是场景描述',
          nodeObj:{
            totleNode:15,
            defaultNode:8,
            customNode:7,
          },
          founder:'admin',
          createTime:'2023-11-22 10:01',
        })
    }
  },
  methods:{
    customStyle:function ({row , rowIndex}) {
      return 'height:20px'
    },
    // 场景的功能事件
    handleScene(type) {
      switch(type) {
        case 'add': //新增压测场景
            this.$router.push({
              path:'addScene'
            })
          break;
        case 'see'://流程节点图
          break;
        case 'edit'://编辑场景
          break;
        case 'detail'://场景详情
          break;
          case 'delete'://删除场景
          break;
      }
    },
  },
  computed:{
   
  },
}
</script>
<style lang="scss" scoped>
.del{
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
  background: transparent;
  color: #f00;
}
.pt10{
  padding: 10px 0;
}
.always-shadow{
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.p10{
  padding: 10px;
  .title{
    font-weight: bolder;
  }
}
</style>
